<template lang="">
  <div>
    <!-- header -->
    <mt-header fixed class="header" title="vue项目演示">
      <div slot="right" v-if="$store.state.islogin">欢迎: {{$store.state.username}}</div>
      <!-- <router-link to="#" slot="left">返回</router-link> -->
      <div slot="right" v-else>
        <router-link class="link" to="/login">登录</router-link>&nbsp;
        <router-link class="link" to="/register">注册</router-link>
      </div>
    </mt-header>
    <!-- nav -->
    <mt-navbar style="margin-top:40px;" fixed v-model="navactive">
      <mt-tab-item
        v-for="(item,i) in cats"
        :key="i" 
        :id="item.id+''"
      >{{item.category_name}}</mt-tab-item>
    </mt-navbar>
    <!-- tab-container -->
    <mt-tab-container style="margin-top:90px;margin-bottom:55px;">
      <mt-tab-container-item
        v-infinite-scroll="loadmore"
        infinite-scroll-distance="50"
        :infinite-scroll-immediate-check="true"
        infinite-scroll-disabled="busy"
      >
        <!-- 轮播图 -->
        <mt-swipe :style="{height:h}">
          <mt-swipe-item name="img A">
            <img src="/images/1.jpg" alt=""/>
          </mt-swipe-item>
          <mt-swipe-item name="img B">
            <img src="/images/2.jpg" alt=""/>
          </mt-swipe-item>
          <mt-swipe-item name="img C">
            <img src="/images/3.jpg" alt=""/>
          </mt-swipe-item>
        </mt-swipe>

        <!-- 单一文章信息开始 -->
        <div class="articleItem"
          v-for="(item,i) in articles"
          :key="i"
        >
          <<router-link :to="`/article?id=${item.id}`">
            <!-- 文章标题开始 -->
            <div class="articleItem-header">{{item.subject}}</div>
            <!-- 文章标题结束 -->
            <!-- 文章图文信息开始 -->
            <div class="articleItem-wrapper">
              <!-- 文章图像开始:判断有才渲染  -->
              <div class="articleImg">
                <img 
                  v-if="item.image" 
                  :src="`/images/articles/${item.image}`" 
                />
              </div>
              <!-- 文章图像结束 -->
              <!-- 文章简介开始 -->
              <div class="articleDes">{{item.description}}</div>
              <!-- 文章简介结束 -->
            </div>
            <!-- 文章图文信息结束 -->
          </router-link>
        </div>
        <!-- 单一文章信息结束 -->


      </mt-tab-container-item>

    </mt-tab-container>
    <!-- mt-tabbar -->
    <mt-tabbar fixed v-model="selected">
      <mt-tab-item id="home">首页
        <img v-if="selected=='home'" slot="icon" src="../assets/icons/home_enable.png"/>
        <img v-else slot="icon" src="../assets/icons/home_disable.png"/>
      </mt-tab-item>
      <mt-tab-item id="me">我的
        <img v-if="selected=='me'" slot="icon" src="../assets/icons/me_enable.png"></img>
        <img v-else slot="icon" src="../assets/icons/me_disable.png"></img>
      </mt-tab-item>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navactive:'1',
      selected:'home',
      h:'210px',
      cats:[], //保存当前类别的数组
      articles:[], //保存文章列表
      page:1, //当前页码为1 
      busy:false, //是否禁用无限滚动
    }
  },
  watch:{
    /*监视selected的变化*/ 
    selected(newVal,oldVal){
      // console.log(`newVal:${newVal} oldVal:${oldVal}`);

      if(newVal=='me'){
        this.$router.push('me');
      }
    },
    navactive(newVal,oldVal){
      //切换选项卡时， 将page重置为1
      this.page = 1;
      //加载下一页前回到顶部
      window.scrollTo(0,0)
      // console.log('当前选中项：'+newVal)
      //获取
      this.loadArticles(newVal,1,(data)=>{
        this.articles = data;
      })
    }
  },
  methods:{
    //统一封装loadArticles方法, 分别在3个地方调用 
    loadArticles(cid,page,callback){
      this.$indicator.open({
        text:'加载中...',
        spinnerType:'snake'
      })
      this.axios.get(`/articles?cid=${cid}&page=${page}`).then(res=>{
        console.log(res);

        //将服务端返回的文章列表作为参数调用callback
        callback(res.data.results)
        this.$indicator.close();
      })
    },

    //触底加载更多
    loadmore(){
      this.busy = true;
      let cid = this.navactive; //当前类别id
      this.page++; //让当前页码递增
      // console.log(`loadmore--cid:${cid} page:${this.page}`)

      this.loadArticles(cid,this.page,(data)=>{
        this.articles.push(...data);
        this.busy = false;
      })
    },
    //封装尺寸方法
    initSwipeHeight(){
      let picw = 1242;
      let pich = 698;
      let screenw = window.screen.width;
      let swipeh = ((pich*screenw)/picw)+'px';
      this.h = swipeh;
    }
  },

  mounted(){
    this.initSwipeHeight();

    //请求列表选项category
    this.axios.get('/category').then((res)=>{
      // console.log(res);
      this.cats = res.data.results;
    });

    //请求articles
    this.loadArticles(1,1,(data)=>{
      this.articles = data
    })
  }
}
</script>
<style scoped>
  .link{
    color:white;
  }
  .mint-swipe img{
    width:100%;
  }
  .articleItem {
  padding: 10px 0;
  margin: 0 10px;
  border-bottom: 1px solid #999;
}
.articleItem-header {
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
}
.articleItem-wrapper {
  display: flex;
  align-items: center;
  padding-top: 10px;
  width: 100%;
}
.articleImg {
  margin-right: 15px;
}
.articleImg img {
  width: 112px;
  height: 74px;
  border-radius: 5px;
}
.articleDes {
  height: 65px;
  font-size: 15px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 21px;
  letter-spacing: normal;
  color: #444;
}
</style>